<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>后台登陆系统</title>
		<#assign base=request.contextPath  />
    <base id="basePath" href="${base}">
    <meta name="author" content="DeathGhost" />
    <link rel="stylesheet" type="text/css" href="${base}/css/style.css" tppabs="${base}/css/style.css" />
    <!--layui弹框要引入的js-->
    <link rel="stylesheet" href="${base}/frame/layui/css/layui.css" media="all" />
    <script src="${base}/frame/layui/layui.all.js" charset="utf-8"></script>
    <script src="${base}/frame/layui/layui.js" charset="utf-8"></script>
    <script src="${base}/js/jquery/jquery.min.js"></script>
    <style>
        body {
            height: 100%;
            background: #16a085;
            overflow: hidden;
        }

        canvas {
            z-index: -1;
            position: absolute;
        }
    </style>
    <script src="${base}/js/jquery/jquery.js"></script>
    <script src="${base}/js/verificationNumbers.js" tppabs="${base}/js/verificationNumbers.js"></script>
    <script src="${base}/js/Particleground.js" tppabs="${base}/js/Particleground.js"></script>
    <script>
        $(document).ready(function() {
            //粒子背景特效
            $('body').particleground({
                //背景颜色点的颜色
                dotColor: '#5cbdaa',
                //背景颜色线的颜色
                lineColor: '#5cbdaa'
            });
            //验证码
            createCode();
            //测试提交，对接程序删除即可
            $(".submit_btn").click(function() {
                location.href = "javascrpt:;"/*tpa=http://***index.html*/ ;
            });
        });


    </script>
</head>

<body>
<dl class="admin_login">
    <dt>
        <strong>后台登陆系统</strong>
        <em>Unicorn Technology</em>
    </dt>
    <dd class="user_icon">
        <input type="text" placeholder="手机号" id="phone" class="login_txtbx" />
    </dd>
    <dd class="pwd_icon">
        <!--短信验证码案例在case包下 可以参考用&ndash;&gt;-&ndash;&gt;-->
        <input type="text" id="code"  placeholder="请输入验证码" class="login_txtbx" style="width: 170px;">
        <input id="btn" type="button" value="获取验证码"  style="color: #16a085; border: 1px solid #16a085; width: 95.5px; height: 40px;"/><#--onclick="getMsgNum(this)"-->
    </dd>
    <dd>
        <button type="button" id="onSubmit"  onclick="onSubmit()" class="submit_btn">登陆</button>
    </dd>

</dl>
<script>
    function onSubmit(){
        //获取文本框的数据,如果文本框没没有数据就提示是不能为空
       if($("#phone").val()==""){
            layer.msg("手机号不能为空")
            return;
        }

        //密码必须是6到12位数字
        //var isPass = document.getElementById("password").value;
        //var reg = /^[a-z0-9_-]{6,12}$/;
        //手机号验证 /^[1][3,4,5,7,8][0-9]{9}$/
        //[1]:代表第一位数
        //{3,4,5,7,8,6}:代表第二位数
        //[0-9]:代表后9位数
        var phone = document.getElementById("phone").value;
        var regPhone = /^[1][3,4,5,7,8,6][0-9]{9}$/;

        // if(!reg.test(isPass)){
        //     layer.msg("密码必须是6-12位密码")
        // }else
        if(!regPhone.test(phone)){
            layer.msg("手机号格式不对")
           } else if(phone!="13339999731" && phone != "18703743110" && phone != "16627622235"){
              layer.msg("该手机号不能作为登陆手机号")
              return;
          } else{
            $.ajax({
                type:"POST",
                url:"${base}/admin/equalsCache",
                data:{
                    phone:$("#phone").val(),
                    code:$("#code").val(),
                },
                success:function (data) {
                    // alert("data:"+data)
                    //alert(JSON.stringify(data))
                    if(data=="验证码不符"){
                        layer.msg("验证码不对,请核对验证码!");
                    }else {

                        if(data){
                            layer.msg("🤴&nbsp;&nbsp;&nbsp;登陆成功");
                            //注册成功之后阻塞300毫秒在值执
                            // 行下一步
                            setTimeout(function(){
                                //注册成功  返回登陆页面
                                window.location.href="${base}/admin/index.html";
                            },300)
                        }else {
                            layer.msg("🙅&nbsp;&nbsp;&nbsp;登陆失败....")
                        }
                    }
                }
            });
        }
    }
    //键盘事件
    $("body").bind("keydown",function(e){
        // 兼容FF和IE和Opera
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            //回车执行查询
            $("#onSubmit").click();
        }
    });
    //校验手机号是否合法
    function isPhoneNum(){
        var phonenum = $("#phone").val();
        var reg = /^[1][3,4,5,7,8,6][0-9]{9}$/;
        if(!reg.test(phonenum)){
            layer.msg('请输入有效的手机号码！');
            return false;
         }  else if (phonenum != "13339999731" && phonenum != "18703743110" && phonenum != "16627622235") {
             layer.msg("该手机号不能作为登陆手机号!")
             return false;
         } else{
            return true;
        }
    }

    $("#btn").click(function (){
        sendyzm($("#btn"));
    });

    //用ajax提交到后台的发送短信接口
    function sendyzm(obj){
        var phone = $("#phone").val();
        var result = isPhoneNum() ;
        if(result) {
            $.ajax({
                url:"${base}/admin/SendSMS",
                data:{phone:$("#phone").val()},
                type:"POST",
                async : false,
                success:function(res){
                    if(res.code===0){
                        layer.msg("验证码发送成功");
                    }else{
                        layer.msg(res.msg)
                    }
                },
                error:function(){
                    layer.msg("验证码发送失败");
                }
            })
            setTime(obj);//开始倒计时
        }
    }
    //60s倒计时实现逻辑
    var countdown = 60;
    function setTime(obj) {
        if (countdown == 0) {
            obj.prop('disabled',false);
            obj.text("点击获取验证码");
            countdown = 60;//60秒过后button上的文字初始化,计时器初始化;
            return;
        } else {
            obj.prop('disabled', true);
            obj.text("("+countdown+"s)后重新发送");
            countdown--;
        }
        setTimeout(function() { setTime(obj) },300) //每1000毫秒执行一次
    }




</script>

</body>




</html>